<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-04 23:35:43
-->
<template>
  <div class="warp">
    <!-- 头部导航栏 -->
    <div class="hcontent">
      <van-icon name="wap-home-o" size="40px" />
      <p class="text">网易严选</p>
      <van-icon name="search" size="40px" />
      <van-icon name="shopping-cart-o" size="40px" />
    </div>
    <div class="empty3"></div>

    <div class="main">
      <!-- 网易图片 -->
      <div class="center">
        <van-image
          width="150"
          height="50"
          src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png"
        />
      </div>

      <!-- 登录方式 -->
      <div class="method">
        <div class="iphone">
          <van-button type="danger" block to="./iphone" style="width: 350px; height: 52px">
            <van-icon name="contact" size="15px">手机号快捷登录</van-icon>
          </van-button>
        </div>

        <div class="email">
          <van-button
            block
            type="default"
            to="./email"
            style="width: 350px; height: 52px"
            hairline
            success
          >
            <van-icon name="envelop-o" size="15px" color="red">注册</van-icon>
          </van-button>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部 -->
  <div class="footer">
    <div class="itemname">
      <!-- 第一种：微信 -->
      <van-icon name="wechat" />
      <span class="log1">微信</span>
    </div>
    <p class="itemname">|</p>

    <div class="itemname">
      <!-- 第二种：QQ -->
      <van-icon name="qq" />
      <span class="log2">QQ</span>
    </div>
    <p class="itemname">|</p>

    <div class="itemname">
      <!-- 第三种：微博 -->
      <van-icon name="weibo" />
      <span class="log3">微博</span>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<script lang="ts">
export default {
  name: 'NoLogin'
}
</script>

<style lang="less" scoped>
.warp {
  position: relative;
  background-color: #f2f5f4;
  height: 700px;
}
.hcontent {
  background-color: white;
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}
.empty3 {
  height: 40px;

  background-color: #f2f5f4;
}
.main {
  background-color: #f2f5f4;
}
.center {
  text-align: center;
  margin-bottom: 100px;
  // margin-top: 70px;
}
.iphone {
  margin-left: 12px;
}

.email {
  margin-top: 20px;
  margin-left: 12px;
}
.footer {
  position: absolute;
  bottom: 50px;
  margin-left: 100px;
}

.itemname {
  margin: 0 6px;
  float: left;
  font-size: 13px;
}
</style>
